<template>
  <div class="evaluate-container">
    <div>
      <div class="evaluate-content">
        <van-row type="flex" style="margin-top:30px">
          <van-col span="8" style="text-align:center">
            <div class="score-num">5.0</div>
            <div class="score-text">综合评分</div>
            <div class="score-introduce">高于周边商家96%</div>
          </van-col>
          <van-col
            span="13"
            style="padding-left:20px; border-left:1px solid #eee;"
          >
            <div style="display:flex; justify-content:space-between;">
              <p>服务态度</p>
              <van-rate
                v-model="value1"
                allow-half
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div
              style="display:flex; justify-content:space-between; margin-top:5px; margin-bottom:5px;"
            >
              <p>菜品质量</p>
              <van-rate
                v-model="value2"
                allow-half
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div>
              <p>
                送达时间<span
                  style="font-size:14px; color:#C2C2C2; margin-left:15px;"
                  >20分钟</span
                >
              </p>
            </div>
          </van-col>
        </van-row>
        <div
          style="margin-top:20px; width:100%; height:20px; background-color:#F4F5F7;"
        ></div>
        <div>
          <div
            style="display:flex; justify-content: space-around; font-weight:600; margin-top:10px; padding:5px;"
          >
            <p
              :class="{ bg: hasShow1 }"
              style="border:1px solid #FFC300;  width:33.33%; height:35px; text-align: center; line-height:35px; border-radius:3px; color:#FFC300;"
              @click="
                (hasShow1 = true),
                  (hasShow2 = false),
                  (hasShow3 = false),
                  (isshow1 = true),
                  (isshow2 = false),
                  (isshow3 = false)
              "
            >
              全部{{ evaluatelistlength }}
            </p>
            <p
              :class="{ bg: hasShow2 }"
              style="border:1px solid #FFC300;  width:33.33%; height:35px; text-align: center; line-height:35px; border-radius:3px; color:#FFC300;"
              @click="
                (hasShow2 = true),
                  (hasShow1 = false),
                  (hasShow3 = false),
                  (isshow2 = true),
                  (isshow1 = false),
                  (isshow3 = false)
              "
            >
              满意15
            </p>
            <p
              :class="{ bg: hasShow3 }"
              style="border:1px solid #FFC300;  width:33.33%; height:35px; text-align: center; line-height:35px; border-radius:3px; color:#FFC300;"
              @click="
                (hasShow3 = true),
                  (hasShow1 = false),
                  (hasShow2 = false),
                  (isshow3 = true),
                  (isshow2 = false),
                  (isshow1 = false)
              "
            >
              不满意5
            </p>
          </div>
          <div style="margin-top:10px; margin-bottom:80px;">
            <div
              :class="{ isshow: isshow1 }"
              style="padding:10px; display:none;"
              v-for="(item, index) in evaluatelist"
              :key="index"
            >
              <div
                style="display:flex; padding-bottom:20px; border-bottom:1px solid #eee;"
              >
                <van-image
                  round
                  width="3rem"
                  height="3rem"
                  :src="item.avatar"
                />
                <div style="flex:1; margin-left:5px;">
                  <div
                    style="width:100%; display:flex; justify-content: space-between;margin-bottom:8px;"
                  >
                    <p style="font-weight:600; font-size:14px;">
                      {{ item.username }}
                    </p>
                    <p style="font-size:14px; color:#aaa;">
                      2020-08-11 12:31:26
                    </p>
                  </div>
                  <div style="display:flex; margin-bottom:8px;">
                    <van-rate
                      v-model="item.score"
                      :size="15"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <p style="font-size:14px; color:#aaa; margin-left:10px;">
                      {{ item.deliveryTime }}分钟送达
                    </p>
                  </div>
                  <div style="font-size:14p; margin-bottom:8px;">
                    {{ item.text }}
                  </div>
                  <div>
                    <van-icon name="good-job" color="#FFC300" :size="25" />
                    <van-tag
                      plain
                      type="primary"
                      size="medium"
                      color="#bbb"
                      style="padding:2px; margin-left:5px; margin-bottom:5px;"
                      v-for="(child, i) in item.recommend"
                      :key="i"
                      >{{ child }}</van-tag
                    >
                  </div>
                </div>
              </div>
            </div>

            <div
              :class="{ isshow: isshow2 }"
              style="padding:10px; display:none;"
            >
              <div
                style="display:flex; padding-bottom:20px; border-bottom:1px solid #eee;"
              >
                <van-image round width="3rem" height="3rem" :src="PictureUrl" />
                <div style="flex:1; margin-left:5px;">
                  <div
                    style="width:100%; display:flex; justify-content: space-between;margin-bottom:8px;"
                  >
                    <p style="font-weight:600; font-size:14px;">1*******8</p>
                    <p style="font-size:14px; color:#aaa;">
                      2020-08-11 12:31:26
                    </p>
                  </div>
                  <div style="display:flex; margin-bottom:8px;">
                    <van-rate
                      v-model="value3"
                      :size="15"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <p style="font-size:14px; color:#aaa; margin-left:10px;">
                      30分钟送达
                    </p>
                  </div>
                  <div style="font-size:14p; margin-bottom:8px;">
                    不错的食物
                  </div>
                  <div>
                    <van-icon name="good-job" color="#FFC300" :size="25" />
                    <van-tag
                      plain
                      type="primary"
                      size="medium"
                      color="#bbb"
                      style="padding:2px; margin-left:5px; margin-bottom:5px;"
                      >皮蛋瘦肉粥</van-tag
                    >
                  </div>
                </div>
              </div>
            </div>
            <div
              :class="{ isshow: isshow3 }"
              style="padding:10px; display:none;"
            >
              <div
                style="display:flex; padding-bottom:20px; border-bottom:1px solid #eee;"
              >
                <van-image round width="3rem" height="3rem" :src="PictureUrl" />
                <div style="flex:1; margin-left:5px;">
                  <div
                    style="width:100%; display:flex; justify-content: space-between;margin-bottom:8px;"
                  >
                    <p style="font-weight:600; font-size:14px;">1*******8</p>
                    <p style="font-size:14px; color:#aaa;">
                      2020-08-11 12:31:26
                    </p>
                  </div>
                  <div style="display:flex; margin-bottom:8px;">
                    <van-rate
                      v-model="value3"
                      :size="15"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                    <p style="font-size:14px; color:#aaa; margin-left:10px;">
                      30分钟送达
                    </p>
                  </div>
                  <div style="font-size:14p; margin-bottom:8px;">
                    不错的食物
                  </div>
                  <div>
                    <van-icon name="good-job" color="#FFC300" :size="25" />
                    <van-tag
                      plain
                      type="primary"
                      size="medium"
                      color="#bbb"
                      style="padding:2px; margin-left:5px; margin-bottom:5px;"
                      >皮蛋瘦肉粥</van-tag
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shopratings } from "@/apis/apis";
import Bscroll from "better-scroll";
export default {
  data() {
    return {
      activeName: "a",
      value1: 4.5,
      value2: 4,
      value3: 4,
      hasShow1: true,
      hasShow2: false,
      hasShow3: false,
      isshow1: true,
      isshow2: false,
      isshow3: false,
      PictureUrl: "",

      evaluatelist: "",
      evaluatelistlength: "",
    };
  },
  created() {
    shopratings().then((res) => {
      // console.log(res.data.data)
      this.evaluatelist = res.data.data;
      this.evaluatelistlength = res.data.data.length;
      this.$nextTick(() => {
        new Bscroll(".evaluate-container", {
          click: true,
        });
      });
    });
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.evaluate-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .evaluate-content {
    flex: 1;
    overflow-y: scroll;
  }
}
.score-num {
  font-size: 24px;
  font-weight: 600;
  color: #ffc300;
}
.score-text {
  margin-top: 5px;
  font-weight: 600;
}
.score-introduce {
  margin-top: 5px;
  font-size: 12px;
  color: darkgray;
}
.score-nav {
  background-color: #ffc300;
}
.bg {
  background-color: #ffc300;
  color: #000 !important;
}
.isshow {
  display: block !important;
}
</style>
